import { computed, defineComponent, h, resolveComponent } from 'vue';

import { Icon } from '@iconify/vue';
import { NIcon } from 'naive-ui';
import './style.scss';

export default defineComponent({
  name: 'BaseIcon',
  inheritAttrs: false,
  props: {
    // 类
    class: {
      type: [String, Object] as PropType<string | Record<string, unknown>>
    },
    // 样式
    style: {
      type: [String, Object] as PropType<string | Record<string, unknown>>
    },
    // 图标的名称
    name: {
      type: String as PropType<string>
    },
    // 图标的名称
    size: {
      type: [Number, String] as PropType<number | string>
    },
    // 大小
    viewBox: {
      type: String as PropType<string>
    }
  },
  emits: [],
  setup: function (props, context) {

    const renderSymbol = () => {
      const viewBox = props.viewBox || '0 0 128 128';
      const innerHTML = '<svg aria-hidden="true" viewBox="' + viewBox + '" xmlns="http://www.w3.org/2000/svg">' +
        '<use xlink:href="#' + props.name + '" fill="currentColor"/>' +
        '</svg>';
      return h('i', {
        class: ['fx-icon', props.class],
        style: [symbolStyle.value, props.style],
        innerHTML: innerHTML,
        ...context.attrs
      });
    };
    const renderSvg = () => {
      return h(NIcon, {
        class: ['fx-icon', props.class],
        style: props.style,
        size: props.size
      }, {
        default: () => h(Icon, {
          class: ['fx-icon', props.class],
          style: [props.style],
          icon: props.name || '',
          size: props.size,
          ...context.attrs
        })
      });
    };
    const renderImage = () => {
      return h('i', {
        class: ['fx-icon', props.class],
        style: [imageStyle.value, props.style],
        ...context.attrs
      }, [
        h('img', {
          src: props.name,
          alt: '',
          ...context.attrs
        })
      ]);
    };
    const renderClass = () => {
      let className = props.name || '';
      if (className.startsWith('class-')) {
        className = className.substring(6);
      }
      return h('div', {
        class: ['fx-icon', props.class],
        style: [props.style],
        ...context.attrs
      }, h('div', {
        class: className
      }));
    };
    const renderComponent = () => {
      return h(NIcon, {
        class: ['fx-icon', props.class],
        style: props.style,
        size: props.size,
        ...context.attrs
      }, {
        default: () => h(resolveComponent(props.name || ''), {})
      });
    };

    const isSvgIcon = computed(() => {
      return props?.name?.includes(':');
    });
    const isSymbolIcon = computed(() => {
      return props?.name?.startsWith('fx-icon-');
    });
    const isClassIcon = computed(() => {
      return props?.name?.startsWith('fx-class-') ||
        props?.name?.startsWith('class-');
    });
    const isImageIcon = computed(() => {
      const linesString = ['https://', 'http://', '/src/', '/assets/', 'data:image', '/static/'];
      return linesString.find((str) => props.name?.startsWith(str));
    });
    const symbolStyle = computed(() => {
      return `font-size: ${props.size}px;width: ${props.size}px;height: ${props.size}px;`;
    });
    const imageStyle = computed(() => {
      return `width: ${props.size}px;height: ${props.size}px;display: inline-block;overflow: hidden;`;
    });

    return () => {
      if (props.name) {
        return isSymbolIcon.value ? renderSymbol() :
          isImageIcon.value ? renderImage() :
            isSvgIcon.value ? renderSvg() :
              isClassIcon.value ? renderClass() : renderComponent();
      }
    };
  }
});